<template>
 <div class="login-box" >

   <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
     <h1 style="text-align: center">欢迎登陆</h1>
     <el-form-item label="账号" prop="name">
       <el-input v-model="form.name"></el-input>
     </el-form-item>

     <el-form-item label="密码" prop="password">
       <el-input v-model="form.password"></el-input>
     </el-form-item>

     <img :src="captcha" alt="验证码" @click="changeCaptcha"  >
     <el-form-item label="验证码" prop="code">
       <el-input type="text" v-model="form.code"></el-input>
     </el-form-item>

     <el-form-item >
       <el-button type="primary" @click="login('form')">登录</el-button>
     </el-form-item>
   </el-form>

 </div>
</template>

<script>
import Qs from 'qs';
export default {
  name: 'HelloWorld',
  data () {
    return {
      //获取验证码的网址
      captcha:'http://localhost:9090/captcha',

        form:{
          name:'',
          password:'',
          code:'',
      },
      // 验证规则
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }


    }
  },
  methods:{
    changeCaptcha:function () {
      this.captcha= 'http://localhost:9090/captcha?v=' + Date.now();
    },
    //登录的  点击事件
    login(formName){
      this.$refs[formName].validate((valid)=> {
        //声明变量
        let vm = this;
        if (valid) {
        //axios的使用
        this.axios({
          //请求后端地址   loginJson（api/user/login）类似于这
          url: 'http://localhost:9090/loginJson',
          //请求方式
          method: 'POST',
          //上面的data{return{}}里面的值 所以这里填data  vm是上面声明的变量 let vm =this;
          data: {
            //这三个是传给后端的值
            name: vm.form.name,
            password: vm.form.password,
            code: vm.form.code,
          },
          //纠正字符串  和老邢的不一样
          transformRequest: [function (data) {
            return Qs.stringify(data)
          }],
          //请求过后 需要些then 后端返回的值  是否登陆成功
        }).then(function (res) {

          if (res.data.code == 0) {
            //储存user对象到全局变量
            vm.$store.commit('updateUser',res.data.data);

            //vm的意思就是this  这个就等于 vant里的提示
            vm.$message({
              message: res.data.msg,
              type: 'success'
            });


            //延时登录  等提示结束  在跳转
            setTimeout(function () {
              vm.$router.push("/Home")
            }, 1000);
          } else {
            //提示登录失败
            vm.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        })
      } else {
          this.$message.error('输入格式错误');
          return false;
        }

      });

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.login-box {
  width: 500px;
  height: 400px;
  border: 1px solid olivedrab;
  margin: 150px auto;
  padding: 20px 50px 20px 30px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px greenyellow;
  text-align: center;
}
</style>
